<template>
  <div id="app">
    <h2>App根组件</h2>
    <hr />

    <div class="box">
      <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽中 -->
      <!-- 如果要把内容填充到指定的插槽中，需要使用v-slot，且之后要指定插槽的 name -->
      <!-- v-slot指令不能直接用在被填充的标签上，需要用template标签包裹，该template标签只起包裹作用，不会被渲染成实际的元素 -->
      <!-- v-slot简写形式 # -->
      <Left>
        <template v-slot:left_slot>
          <p>这是Left组件填充的插槽内容</p>
        </template>
      </Left>
      <Right>
        <template #right_slot="obj">
          <div>
            {{ obj }}
            <br />
            {{ obj.msg }}
          </div>
        </template>
      </Right>
    </div>
  </div>
</template>


<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";

export default {
  name: "App",
  data() {
    return {};
  },
  components: {
    Left,
    Right,
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.box {
  display: flex;
}
</style>
